<template>
  <BasicModal
    v-bind="$attrs"
    title="选择用户"
    :width="800"
    @register="registerInnerModal"
    @ok="handleSubmit"
  >
    <BasicTable @register="registerTable" />
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button type="primary" :pre-icon="IconEnum.IMPORT" @click="handleSubmit">导入用户</a-button>
    </template>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicTable, useTable } from '@/components/Table';
  import { roleUnallocatedList, roleSelectAll } from '@/api/system/role';
  import { IconEnum } from '@/enums/appEnum';
  import { columns, formSchemas } from './assign.modal.data';
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useRoute } from 'vue-router';

  /** 拿到路由参数 */
  const roleId = ref<string>('0');
  const route = useRoute();
  roleId.value = (route.params.roleId as string) || '0';

  const emit = defineEmits(['register', 'reload']);

  const [registerInnerModal, { closeModal }] = useModalInner(async () => {
    await getForm().resetFields();
    // await reload();
  });

  const [registerTable, { getForm, getSelectRowKeys, setSelectedRows }] = useTable({
    rowSelection: {
      type: 'checkbox',
    },
    showIndexColumn: false,
    api: roleUnallocatedList,
    rowKey: 'userId',
    useSearchForm: true,
    formConfig: {
      schemas: formSchemas,
      labelWidth: 80,
      baseColProps: {
        span: 8,
      },
    },
    // 额外的请求参数
    searchInfo: {
      roleId: roleId.value,
    },
    immediate: false,
    columns: columns,
    showTableSetting: false,
    // resizeHeightOffset: 350,
    inset: true,
  });

  async function handleSubmit() {
    const userIds = getSelectRowKeys();
    if (userIds.length !== 0) {
      await roleSelectAll(roleId.value, userIds as number[]);
    }
    setSelectedRows([]);
    emit('reload', closeModal);
  }
</script>

<style lang="less" scoped></style>
